<template>
  <div class="hello">
    <h1 style="padding-left: 15px;">{{ msg }}</h1>
    <hr />
    <div>
      <div style="margin-top: 80px" class="text-c">
        <button class="btn" style="width: 40%" @click="getImg()">
          获取图片
        </button>
        <button class="btn btn_purple" style="width: 40%" @click="getQrCode()">
          获取二维码
        </button>
      </div>
      <div style="margin-top: 20px" class="text-c">
        <button class="btn btn_green" style="width: 40%" @click="getPay()">
          调微信支付
        </button>
        <button class="btn btn_orange" style="width: 40%" @click="getScan()">
          扫一扫
        </button>
      </div>

      <div style="margin-top: 10px" class="text-c" @click="getImg()">
        <img id="uploadImg" src="" style="width: 160px; height: 160px" />
      </div>

      <hr />
      <div class="tip-box">
        温馨提示：我要如何关闭这么多默认的调试弹框，就在文件夹html/index.html里面找到wx.config，将第一个配置debug:
        false即可
      </div>

      <div style="border: 2px solid #69f; margin-top: 15px">
        <p>验证通过的api有:</p>
        <div id="apiList"></div>
      </div>
    </div>
  </div>
</template>

<script>
// 不了解为什么这样写的，先看微信官方文档 
// https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

// 后台返回的配置信息
let config = {};

export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  methods: {
    // 获取二维码
    getQrCode() {
      let data = {
        expire_seconds: 604800,
        action_name: "QR_SCENE",
        action_info: {
          scene: { scene_id: 123 },
        },
      };

      let url = "/api/getQrCode";
      $.ajax({
        type: "POST",
        url,
        data,
        cache: false,
        async: false,
        dataType: "json",
        // dataType: ($.browser.msie) ? "text" : "xml",
        success: function (data) {
          console.log("getQrCode-成功--", data);
          // showQrCode(xmlobj)
          let url = `https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=${data.ticket}`;
          // 这样前端get请求，跳转页面
          window.location.href = url;
        },
      });
    },
    // 展示二维码
    showQrCode(data) {
      let url = `https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=${data.ticket}`;
      $.ajax({
        type: "Get",
        url,
        cache: false,
        async: false,
        dataType: "json",
        // dataType: ($.browser.msie) ? "text" : "xml",
        success: function (xmlobj) {
          console.log("QrCode-成功--", xmlobj);
        },
      });
    },
    // 获取地理位置
    getLocation() {
      wx.getLocation({
        type: "wgs84", // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
        success: function (res) {
          console.error("location:", res);
          var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
          var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
          var speed = res.speed; // 速度，以米/每秒计
          var accuracy = res.accuracy; // 位置精度

          wx.openLocation({
            latitude: latitude, // 纬度，浮点数，范围为90 ~ -90
            longitude: 113.377785, // 经度，浮点数，范围为180 ~ -180。
            name: longitude, // 位置名
            address: "我的地址", // 地址详情说明
            scale: 25, // 地图缩放级别,整形值,范围从1~28。默认为最大
            infoUrl: "http://www.baidu.com/", // 在查看位置界面底部显示的超链接,可点击跳转
          });
        },
        error: (err) => {
          console.error("err", err);
        },
      });
    },
    // 调微信支付
    getPay() {
      wx.chooseWXPay({
        timestamp: config.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
        nonceStr: config.nonceStr, // 支付签名随机串，不长于 32 位
        package: "sdfadsf", // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
        signType: "asdfad", // 微信支付V3的传入RSA,微信支付V2的传入格式与V2统一下单的签名格式保持一致
        paySign: "asdfasd", // 支付签名
        success: function (res) {
          // 支付成功后的回调函数
        },
      });
    },
    // 扫一扫
    getScan() {
      wx.scanQRCode({
        needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
        scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
        success: function (res) {
          var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
          console.log("扫码结果-res：", result);
        },
      });
    },
    // 获取本地图片
    getImg() {
      function getLocalData(localid) {
        // $('#modal-img').show();
        //获取本地图片资源
        wx.getLocalImgData({
          localId: localid, // 图片的localID
          success: function (res) {
            var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
            console.error("localData:", localData.length);
            uploadImg.setAttribute("src", localData);
            //开始绑定
            return;
            $.ajax({
              url: "${pageContext.request.contextPath}/wechat/bindface",
              type: "post",
              data: {
                img: localData,
              },
              contentType: "application/x-www-form-urlencoded;charset=utf-8",
              async: true,
              success: function (data) {
                if ("SUCCESS" == data.code) {
                  location.reload();
                  $("#img").src =
                    "../../img/${openid}.jpg?time=" + Math.random();
                  $("#addBtn").html("更新照片");
                } else {
                  alert("" + data.message);
                }
              },
              complete: function () {
                $("#modal-img").hide();
              },
            });
          },
        });
      }
      // 原文链接：https://blog.csdn.net/qq_23543983/article/details/80438317

      wx.chooseImage({
        count: 1, // 默认9
        sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
        success: function (res) {
          console.error("图像选择结果：", res);
          let localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
          // 'https://www.baidu.com/img/flexible/logo/pc/result.png'

          getLocalData(localIds[0]);
        },
      });
    },
    getConfig(){
      return new Promise((res,rej)=>{
        let url = "/api/wx";
        $.ajax({
          type: "get",
          url,
          cache: false,
          async: false,
          dataType: "json",
          // dataType: ($.browser.msie) ? "text" : "xml",
          success: function (xmlobj) {
            console.log("成功--", xmlobj);
            res(xmlobj)
          },
          error: function(error){
            console.error('error:', error);
            rej(error)
          }
        });
      })
    },
    initWX(rel){
      console.log("token信息对象: ", typeof rel, rel, rel.length);

      var localIds = "";
      let uploadImg = document.getElementById("uploadImg");

      console.log("wx", wx);

      // 后台返回的配置信息
      config = rel;

      // const config ={
      //   "appId":"wx3680aee5b396cc0f",
      //   "timestamp":1637402688718,
      //   "nonceStr":"5158860791725619",
      //   "signature":"c383d0d37c13fed1f5cefe2c33776025c95816bc"};
      const jsArr = [
        "chooseWXPay",
        "scanQRCode",
        "updateTimelineShareData",
        "chooseImage",
        "onMenuShareQZone",
      ];
      wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: config.appId, // 必填，公众号的唯一标识
        timestamp: config.timestamp, // 必填，生成签名的时间戳
        nonceStr: config.nonceStr, // 必填，生成签名的随机串
        signature: config.signature, // 必填，签名
        jsApiList: jsArr, // 必填，需要使用的JS接口列表
      });

      wx.ready(function (a, b) {
        console.log("read", a, b);

        wx.checkJsApi({
          jsApiList: jsArr, // 需要检测的JS接口列表，所有JS接口列表见附录2,
          success: function (res) {
            console.error("success--ready--123-456", res);
            let str = $("<div></div>");
            let obj = res.checkResult;
            for (const key in obj) {
              if (obj[key]) {
                str.append($(`<p>${key}</p>`));
              }
            }
            $("#apiList").html(str);
            // 以键值对的形式返回，可用的api值true，不可用为false
            // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
          },
        });
        wx.updateTimelineShareData({
          title: "12", // 分享标题
          link: "http://www.baidu.com", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: "", // 分享图标
          success: function () {
            // 设置成功
            alert("分享成功");
          },
        });

        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
      });
      wx.error(function (a, b) {
        console.error("error", a, b);
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
      });
    },
    async initPage() {
      // 初始化微信js-api
      // 获取最新的token对象
      try {
        let rel = await this.getConfig()
        // 初始化微信配置
        this.initWX(rel)
      } catch (error) {
        console.error('error',error);
        this.$alert("服务器报错", '错误', {
          type: 'error'
        })
        return
      }
    },
  },
  mounted() {
    setTimeout(()=>{
      this.initPage();
    }, 1000)
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.btn {
  height: 50px;
  line-height: 50px;
  background-color: #69f;
  border: none;
  color: #fff;
  border-radius: 3px;
}

.btn_purple {
  background-color: #8870c3;
}

.btn_orange {
  background-color: orange;
}

.btn_green {
  background-color: #3bb360;
}

.text-c {
  text-align: center;
}
.tip-box {
  background: #568cf6;
  font-size: 14px;
  padding: 10px;
  color: #fff;
  border-radius: 3px;
}
</style>
